<template>
  <view class="user-profile">
    <!-- 用户信息展示 -->
    <u-avatar :src="user.avatar" size="80"></u-avatar>
    <text class="user-name">{{ user.name }}</text>
    <text class="user-campus">校区: {{ user.campus }}</text>
    <text class="user-grade">年级: {{ user.grade }}</text>

    <!-- 聊天按钮 -->
    <u-button type="primary" @click="navigateToChat">发消息</u-button>
  </view>
</template>

<script setup >
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
//聊天按钮跳转

const navigateToChat = () => {
  uni.navigateTo({
    url: `/pages/message/chat?userId=${user.value.userId}&name=${user.value.name}&avatar=${user.value.avatar}`
  });
};
// 定义响应式数据存储参数
const user = ref({
  name: '',
  avatar: '',
  campus: '',
  grade: '',
  userId: ''
});
// 在页面加载时接收参数
onLoad((query) => {
  // 将URL参数赋值给响应式对象
  user.value = {
    name: query.name || '未知用户', // 提供默认值
    avatar: query.avatar || '',
    campus: query.campus || '',
    grade: query.grade || '',
    userId: query.userId || ''
  }

  // 打印验证
  console.log('接收的用户信息:', user.value)
})

const posts = ref([
  {
    avatar: 'https://img.yzcdn.cn/vant/leaf.jpg',
    name: '备用墙号',
    campus: '金堂校区',
    grade: '2021级',
    time: '2025年05月21日',
    tags: ['#代'],
    content: '快递代取 跑腿代办 需要的联系 送进寝室',
    viewCount: '0',
    likeCount: '0',
    commentCount: '0',
    category: '一起拼单',
    top: true,
    qrCode: 'https://example.com/qrcode',
    userId: '1' // 添加用户 ID 字段
  },
]);

</script>

<style lang="scss">.user-profile {
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .user-name {
    margin-top: 20rpx;
    font-size: 36rpx;
    color: #333;
  }
  .user-campus,
  .user-grade {
    margin-top: 10rpx;
    font-size: 28rpx;
    color: #666;
  }
}
</style>
